<template>
  <div class="babyMutipul-container" :style="`min-height: ${height || 40}px`">
    <div
      v-for="(item, index) in items"
      :key="item.value"
      class="item"
      :class="{active: item.active}"
      :style="`margin-right:${marginRight}px;margin-bottom:${marginBottom}px;`"
      @click="toogle(index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: [Array],
    height: [Number],
    marginRight: {
      type: Number,
      require: false,
      default: 10
    },
    marginBottom: {
      type: Number,
      require: false,
      default: 0
    }
  },
  methods: {
    toogle(index) {
      const newItems = JSON.parse(JSON.stringify(this.items));
      if (newItems[index].active) {
        newItems[index].active = false;
      } else {
        newItems[index].active = true;
      }

      this.$emit('update:items', newItems);
    }
  }
};
</script>
<style lang="scss" scoped>
.babyMutipul-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    height: 25px;
    border-radius: 4px;
    width: 100px;
    text-align: center;
    border: 1px solid #b3b3b3;
    line-height: 25px;
    color: #333333;
    background-color: #fff;
    cursor: pointer;
    &.active {
      background-color: #ffb03e;
      border: 1px solid #ffb03e;
      color: #fff;
    }
  }
}
</style>
